/*
 * @description: 商城财务/微信账户申请流程
 * @Author: along
 * @Date: 2021-04-12
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container account-form">
        <!-- fail -->
        <div v-if="audit_fail_reason.length > 0 && step == 1">
            <div class="container-fail">
                <i class="el-icon-warning" />
                <p
                    class="container-fail-text"
                    v-for="(item,index) in audit_fail_reason"
                    :key="index"
                >
                    {{ item }}
                </p>
            </div>
            <div class="container-fail-seat" />
        </div>

        <!-- title -->
        <div class="container-header">
            微信账户设置流程
        </div>

        <!-- step -->
        <div class="container-step">
            <el-steps
                :active="step"
                :align-center="true"
                process-status="wait"
            >
                <el-step
                    title="资料完善"
                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                />
                <el-step
                    title="账户验证"
                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                />
                <el-step
                    title="确认签约"
                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                />
                <el-step
                    title="完成"
                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                />
            </el-steps>
        </div>

        <!-- 微信账户设置流程 -->
        <div v-if="step == 1">
            <!-- form -->
            <div class="container-form">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    :label-position=" 'top' "
                    class="demo-ruleForm"
                >
                    <div>
                        <div class="container-form-head">
                            <p class="container-form-head-title">
                                资料完善
                            </p>
                            <p class="container-form-head-desc">
                                根据微信支付官方的要求，请按以下提示进行资料的填写并提交
                            </p>
                        </div>

                        <!-- 主体类型 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 32 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                主体类型
                            </p>
                        </div>
                        <el-form-item
                            label="请选择您的主体类型"
                            prop="organization_type"
                        >
                            <el-select
                                v-model="ruleForm.organization_type"
                                placeholder="请选择"
                                class="container-form-input"
                                size="small"
                                clearable
                                @change="fnChangeOrigan()"
                            >
                                <el-option
                                    v-for="item in organizationType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                            <el-popover
                                placement="right"
                                width="484"
                                trigger="hover"
                                popper-class="container-form-provide"
                            >
                                <p class="container-form-provide">
                                    <span>1、小微商户:</span>指无营业执照的商户<br>
                                    <span>2、个体工商户:</span>营业执照上的主体类型一般为个体户、个体工商户、个体经营<br>
                                    <span>3、企业:</span>营业执照上的主体类型一般为有限公司、有限责任公司 <br>
                                    <span>4、党政、机关及事业单位:</span>包括国内各级、各类政府机构、事业单位等（如：公安、党团、司法、交通、旅游、工商税务、市政、医疗、教育、学校等机构）<br>
                                    <span>5、其他组织:</span>不属于企业、政府/事业单位的组织机构（如社会团体、民办非企业、基金会），要求机构已办理组织机构代码证<br>
                                </p>
                                <el-button
                                    slot="reference"
                                    type="text"
                                    class="container-form-tip"
                                >
                                    不知道选什么
                                </el-button>
                            </el-popover>
                        </el-form-item>

                        <!-- 营业执照/等级证书信息 -->
                        <div v-if="ruleForm.organization_type !== '2401'">
                            <div
                                class="container-form-head"
                                :style="{ paddingTop: 22 + 'px' }"
                            >
                                <p class="container-form-head-titles">
                                    营业执照/等级证书信息
                                </p>
                            </div>
                            <el-form-item
                                label="证件扫描件"
                                prop="business_license_copy_url"
                            >
                                <div
                                    style="display:flex;align-items:center"
                                    @click="imageIndex = 1"
                                >
                                    <div class="container-form-upload">
                                        <img
                                            v-if="!ruleForm.business_license_copy_url"
                                            src="@/assets/image/upload.png"
                                            alt="加载失败"
                                            class="container-form-upload-img"
                                        >
                                        <img
                                            v-if="ruleForm.business_license_copy_url"
                                            :src="ruleForm.business_license_copy_url"
                                            class="container-form-upload-price"
                                        >
                                        <el-upload
                                            class="container-form-upload-change"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card"
                                            :show-file-list="false"
                                            :http-request="fnUploadImage"
                                            accept="image/*"
                                            :multiple="false"
                                            v-if="update"
                                        />
                                        <div
                                            class="container-form-upload-create"
                                            v-if="ruleForm.business_license_copy_url"
                                        >
                                            <i
                                                class="el-icon-delete"
                                                @click="()=>{
                                                    ruleForm.business_license_copy_url = '';
                                                    this.update = false;
                                                    this.update = true;
                                                }"
                                            />
                                            <i
                                                class="el-icon-zoom-in"
                                                @click="fnPreviewImg(ruleForm.business_license_copy_url)"
                                            />
                                        </div>
                                    </div>
                                    <el-popover
                                        placement="right"
                                        width="484"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            (1) 主体为“个体工商户/企业”时，请上传营业执照的证件图片 ； 主体为“党政、机关及事业单位/其他组织”时，请上传登记证书的证件图片<br>
                                            (2）请上传证件的彩色扫描件或彩色数码拍摄件，黑白复印件需加盖公章（公章信息需完整）<br>
                                            (3）不得添加无关水印（非微信支付商户申请用途的其他水印）<br>
                                            (4)需提供证件的正面拍摄件，完整、照面信息清晰可见。信息不清晰、扭曲、压缩变形、反光、不完整均不接受<br>
                                            (5)不接受二次剪裁、翻拍、PS的证件照片
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                        >
                                            图片要求
                                        </el-button>
                                    </el-popover>
                                </div>
                            </el-form-item>
                            <div class="container-form-content">
                                <el-form-item
                                    label="证件注册号"
                                    prop="business_license_number"
                                    class="container-form-content-input"
                                >
                                    <el-popover
                                        placement="right"
                                        width="484"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            1、主体为“个体工商户/企业”时，请填写营业执照上的注册号/统一社会信用代码，须为15位数字或 18位数字|大写字母。<br>
                                            2、主体为“党政、机关及事业单位/其他组织”时，请填写登记证书的证书编号。<br>
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="ruleForm.business_license_number"
                                        size="small"
                                        placeholder="请填写证件注册号"
                                        minlength="15"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="商户名称"
                                    prop="merchant_name"
                                    class="container-form-content-input"
                                >
                                    <el-popover
                                        placement="right"
                                        width="484"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            1、请填写营业执照/登记证书中的商家名称。<br>
                                            2、个体工商户/党政、机关及事业单位，不能以“公司”结尾。<br>
                                            3、个体工商户，若营业执照上商户名称为空或为“无”，请填写"个体户+经营者姓名"，如“个体户张三” 。
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:65px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="ruleForm.merchant_name"
                                        size="small"
                                        placeholder="请填写商户名称"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="经营者/法人代表人姓名"
                                    prop="legal_person"
                                    class="container-form-content-input"
                                >
                                    <el-popover
                                        placement="right"
                                        width="275"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            请填写证件的经营者/法定代表人姓名
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:160px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="ruleForm.legal_person"
                                        size="small"
                                        placeholder="请填写证件的经营者/法定代表人姓名"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="注册地址"
                                    prop="company_address"
                                    class="container-form-content-input"
                                    v-if="ruleForm.organization_type == '3' || ruleForm.organization_type == '1708'"
                                >
                                    <el-popover
                                        placement="right"
                                        width="180"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            请填写登记证书中的注册地址
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:66px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="ruleForm.company_address"
                                        size="small"
                                        placeholder="请填写登记证书中的注册地址"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="营业期限"
                                    class="container-form-content-input"
                                    v-if="ruleForm.organization_type == '3' || ruleForm.organization_type == '1708'"
                                >
                                    <el-popover
                                        placement="right"
                                        width="484"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            1、请填写证件有效期<br>
                                            2、若证件有效期为长期，请填写：长期，示例：2020-06-06 长期<br>
                                            3、有效期必须大于60天，即结束时间距当前时间需超过60天
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:66px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <div style="display:flex;align-items:center">
                                        <el-date-picker
                                            v-model="ruleForm.business_start_time"
                                            type="date"
                                            placeholder="选择起始时间"
                                            size="small"
                                            style="width:142px !important"
                                        />
                                        <span style="color:#C2C2C2;font-size:14px;padding: 0 8px">
                                            至
                                        </span>
                                        <el-date-picker
                                            v-model="ruleForm.business_end_time"
                                            type="date"
                                            placeholder="选择截止日期"
                                            size="small"
                                            style="margin-right:24px;width:142px"
                                            @change="fngetBusiness(1)"
                                            :disabled="business_end_last_time"
                                        />
                                        <el-checkbox-group
                                            v-model="business_end_last_time"
                                        >
                                            <el-checkbox
                                                :label="0"
                                                :disabled="ruleForm.business_end_time !== ''"
                                            >
                                                长期
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 组织机构代码证信息 -->
                        <div v-if="(ruleForm.organization_type == '2' || ruleForm.organization_type == '3' || ruleForm.organization_type == '1708') && ruleForm.business_license_number.length !== 18">
                            <div
                                class="container-form-head"
                                :style="{ paddingTop: 22 + 'px' }"
                            >
                                <p class="container-form-head-titles">
                                    组织机构代码证信息
                                </p>
                            </div>
                            <el-form-item
                                label="组织机构代码证图片"
                                prop="organization_copy_url"
                            >
                                <div
                                    style="display:flex;align-items:center"
                                    @click="imageIndex = 2"
                                >
                                    <div class="container-form-upload">
                                        <img
                                            v-if="!ruleForm.organization_copy_url"
                                            src="@/assets/image/upload.png"
                                            alt="加载失败"
                                            class="container-form-upload-img"
                                        >
                                        <img
                                            v-if="ruleForm.organization_copy_url"
                                            :src="ruleForm.organization_copy_url"
                                            class="container-form-upload-price"
                                        >
                                        <el-upload
                                            class="container-form-upload-change"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card"
                                            :show-file-list="false"
                                            :http-request="fnUploadImage"
                                            accept="image/*"
                                            :multiple="false"
                                            v-if="update"
                                        />
                                        <div
                                            class="container-form-upload-create"
                                            v-if="ruleForm.organization_copy_url"
                                        >
                                            <i
                                                class="el-icon-delete"
                                                @click="()=>{
                                                    ruleForm.organization_copy_url = '';
                                                    this.update = false;
                                                    this.update = true;
                                                }"
                                            />
                                            <i
                                                class="el-icon-zoom-in"
                                                @click="fnPreviewImg(ruleForm.organization_copy_url)"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                            <div class="container-form-content">
                                <el-form-item
                                    label="组织机构代码"
                                    prop="organization_number"
                                    class="container-form-content-input"
                                >
                                    <el-popover
                                        placement="right"
                                        width="300"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            请填写组织机构代码证上的组织机构代码
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:94px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="ruleForm.organization_number"
                                        size="small"
                                        placeholder="请填写组织机构代码"
                                        minlength="15"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="组织机构代码证有效期限"
                                    class="container-form-content-input length"
                                >
                                    <el-popover
                                        placement="right"
                                        width="454"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            1、请填写组织机构代码证的有效期限<br>
                                            2、若证件有效期为长期，请填写：长期，示例：2020-06-06 长期<br>
                                            3、有效期必须大于60天，即结束时间距当前时间需超过60天
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:168px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <div style="display:flex;align-items:center">
                                        <el-date-picker
                                            v-model="ruleForm.organization_start_time"
                                            type="date"
                                            placeholder="选择起始时间"
                                            size="small"
                                            style="width:142px !important"
                                        />
                                        <span style="color:#C2C2C2;font-size:14px;padding: 0 8px">
                                            至
                                        </span>
                                        <el-date-picker
                                            v-model="ruleForm.organization_end_time"
                                            type="date"
                                            placeholder="选择截止日期"
                                            size="small"
                                            style="margin-right:24px;width:142px"
                                            :disabled="organization_end_last_time"
                                            @change="fngetBusiness(2)"
                                        />
                                        <el-checkbox-group v-model="organization_end_last_time">
                                            <el-checkbox
                                                :label="0"
                                                :disabled="ruleForm.organization_end_time !== ''"
                                            >
                                                长期
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 经营者/法人证件类型 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 22 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                经营者/法人证件类型
                            </p>
                        </div>
                        <el-form-item
                            label="经营者/法人证件类型"
                            prop="id_doc_type"
                        >
                            <el-select
                                v-model="ruleForm.id_doc_type"
                                placeholder="请选择"
                                class="container-form-input"
                                size="small"
                                clearable
                            >
                                <el-option
                                    v-for="item in idDocTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>

                        <!-- 经营者/法人身份证信息 -->
                        <div v-if="ruleForm.id_doc_type == '1'">
                            <div
                                class="container-form-head"
                                :style="{ paddingTop: 22 + 'px' }"
                            >
                                <p class="container-form-head-titles">
                                    经营者/法人身份证信息
                                </p>
                            </div>
                            <div class="container-form-fix">
                                <p class="container-form-fix-title">
                                    上传身份证照片
                                </p>
                                <p class="container-form-fix-desc">
                                    (确保身份证边框完整、图像清晰、光线均匀)
                                </p>
                            </div>
                            <div style="display:flex;align-items:center">
                                <el-form-item
                                    prop="id_card_copy_url"
                                    style="width:160px;margin-right:15px;"
                                >
                                    <div style="display:flex;align-items:center">
                                        <div
                                            class="container-form-card"
                                            @click="imageIndex = 3"
                                        >
                                            <img
                                                src="@/assets/image/card-border.png"
                                                alt="加载失败"
                                                class="container-form-card-border"
                                            >
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="ruleForm.id_card_copy_url"
                                            >
                                                点击重新上传
                                            </p>
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="!ruleForm.id_card_copy_url"
                                            >
                                                点击上传
                                                <span style="color:#20A0FF;font-size:14px;">
                                                    人像面
                                                </span>
                                            </p>
                                            <img
                                                v-if="!ruleForm.id_card_copy_url"
                                                src="@/assets/image/carder-copy.png"
                                                alt="加载失败"
                                                class="container-form-card-img"
                                            >
                                            <img
                                                v-if="ruleForm.id_card_copy_url"
                                                :src="ruleForm.id_card_copy_url"
                                                class="container-form-card-price"
                                            >
                                            <el-upload
                                                class="container-form-card-change"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                list-type="picture-card"
                                                :show-file-list="false"
                                                :http-request="fnUploadImage"
                                                accept="image/*"
                                                :multiple="false"
                                                v-if="update"
                                            />
                                            <div
                                                class="container-form-card-create"
                                                v-if="ruleForm.id_card_copy_url"
                                            >
                                                <i
                                                    class="el-icon-delete"
                                                    @click="()=>{
                                                        ruleForm.id_card_copy_url = '';
                                                        this.update = false;
                                                        this.update = true;
                                                    }"
                                                />
                                                <i
                                                    class="el-icon-zoom-in"
                                                    @click="fnPreviewImg(ruleForm.id_card_copy_url)"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    prop="id_card_national_url"
                                    style="width:160px"
                                >
                                    <div style="display:flex;align-items:center">
                                        <div
                                            class="container-form-card"
                                            @click="imageIndex = 4"
                                        >
                                            <img
                                                src="@/assets/image/card-border.png"
                                                alt="加载失败"
                                                class="container-form-card-border"
                                            >
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="ruleForm.id_card_national_url"
                                            >
                                                点击重新上传
                                            </p>
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="!ruleForm.id_card_national_url"
                                            >
                                                点击上传
                                                <span style="color:#20A0FF;font-size:14px;">
                                                    国徽面
                                                </span>
                                            </p>
                                            <img
                                                v-if="!ruleForm.id_card_national_url"
                                                src="@/assets/image/card-media.png"
                                                alt="加载失败"
                                                class="container-form-card-img"
                                            >
                                            <img
                                                v-if="ruleForm.id_card_national_url"
                                                :src="ruleForm.id_card_national_url"
                                                class="container-form-card-price"
                                            >
                                            <el-upload
                                                class="container-form-card-change"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                list-type="picture-card"
                                                :show-file-list="false"
                                                :http-request="fnUploadImage"
                                                accept="image/*"
                                                :multiple="false"
                                                v-if="update"
                                            />
                                            <div
                                                class="container-form-card-create"
                                                v-if="ruleForm.id_card_national_url"
                                            >
                                                <i
                                                    class="el-icon-delete"
                                                    @click="()=>{
                                                        ruleForm.id_card_national_url = '';
                                                        this.update = false;
                                                        this.update = true;
                                                    }"
                                                />
                                                <i
                                                    class="el-icon-zoom-in"
                                                    @click="fnPreviewImg(ruleForm.id_card_national_url)"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                            <div class="container-form-content">
                                <el-form-item
                                    label="身份证姓名"
                                    prop="id_card_name"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.id_card_name"
                                        size="small"
                                        placeholder="请填写身份证姓名"
                                        minlength="2"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="身份证号码"
                                    prop="id_card_number"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.id_card_number"
                                        size="small"
                                        placeholder="请填写身份证号码"
                                        minlength="15"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="身份证有效期限"
                                    class="container-form-content-input length"
                                >
                                    <el-popover
                                        placement="right"
                                        width="414"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            1、请填写身份证有效期的结束时间<br>
                                            2、若证件结束时间为长期，请填写：长期<br>
                                            3、有效期必须大于60天，即结束时间距当前时间需超过60天
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:109px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <div style="display:flex;align-items:center">
                                        <el-date-picker
                                            v-model="ruleForm.id_card_valid_time"
                                            type="date"
                                            placeholder="选择到期时间"
                                            size="small"
                                            style="width:142px !important;margin-right:24px"
                                            :disabled="id_card_valid_last_time"
                                            @change="fngetBusiness(3)"
                                        />
                                        <el-checkbox-group v-model="id_card_valid_last_time">
                                            <el-checkbox
                                                :label="0"
                                                :disabled="ruleForm.id_card_valid_time !== ''"
                                            >
                                                长期
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 经营者/法人其他类型证件信息 -->
                        <div v-if="ruleForm.id_doc_type == '2' || ruleForm.id_doc_type == '3' || ruleForm.id_doc_type == '4' || ruleForm.id_doc_type == '5'">
                            <div
                                class="container-form-head"
                                :style="{ paddingTop: 22 + 'px' }"
                            >
                                <p class="container-form-head-titles">
                                    经营者/法人其他类型证件信息
                                </p>
                            </div>
                            <el-form-item
                                label="上传证件照片"
                                prop="id_doc_copy_url"
                            >
                                <div
                                    style="display:flex;align-items:center"
                                    @click="imageIndex = 5"
                                >
                                    <div class="container-form-upload">
                                        <img
                                            v-if="!ruleForm.id_doc_copy_url"
                                            src="@/assets/image/upload.png"
                                            alt="加载失败"
                                            class="container-form-upload-img"
                                        >
                                        <img
                                            v-if="ruleForm.id_doc_copy_url"
                                            :src="ruleForm.id_doc_copy_url"
                                            class="container-form-upload-price"
                                        >
                                        <el-upload
                                            class="container-form-upload-change"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card"
                                            :show-file-list="false"
                                            :http-request="fnUploadImage"
                                            accept="image/*"
                                            :multiple="false"
                                            v-if="update"
                                        />
                                        <div
                                            class="container-form-upload-create"
                                            v-if="ruleForm.id_doc_copy_url"
                                        >
                                            <i
                                                class="el-icon-delete"
                                                @click="()=>{
                                                    ruleForm.id_doc_copy_url = '';
                                                    this.update = false;
                                                    this.update = true;
                                                }"
                                            />
                                            <i
                                                class="el-icon-zoom-in"
                                                @click="fnPreviewImg(ruleForm.id_doc_copy_url)"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                            <div class="container-form-content">
                                <el-form-item
                                    label="证件姓名"
                                    prop="id_doc_name"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.id_doc_name"
                                        size="small"
                                        placeholder="请填写证件姓名"
                                        minlength="2"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="证件号码"
                                    prop="id_doc_number"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.id_doc_number"
                                        size="small"
                                        placeholder="请填写证件号码"
                                        minlength="7"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="证件结束日期"
                                    class="container-form-content-input length"
                                >
                                    <el-popover
                                        placement="right"
                                        width="414"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            1、请填写证件有效期的结束时间<br>
                                            2、若证件结束时间为长期，请填写：长期<br>
                                            3、有效期必须大于60天，即结束时间距当前时间需超过60天
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            style="left:84px"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <div style="display:flex;align-items:center">
                                        <el-date-picker
                                            v-model="ruleForm.id_doc_period_end"
                                            type="date"
                                            placeholder="选择到期时间"
                                            size="small"
                                            style="width:142px !important;margin-right:24px"
                                            :disabled="id_doc_period_last_end"
                                            @change="fngetBusiness(4)"
                                        />
                                        <el-checkbox-group v-model="id_doc_period_last_end">
                                            <el-checkbox
                                                :label="0"
                                                :disabled="ruleForm.id_doc_period_end !== ''"
                                            >
                                                长期
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 结算账户信息 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 22 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                结算账户信息
                                <span style="color:#999;font-size:14px;margin-left:11px">
                                    此处设置的卡号为：该微信支付账户的余额所能提现到的银行卡
                                </span>
                            </p>
                        </div>
                        <el-form-item
                            label="选择账户类型"
                            prop="bank_account_type"
                        >
                            <el-radio-group v-model="ruleForm.bank_account_type">
                                <el-radio
                                    label="74"
                                    :disabled="ruleForm.organization_type == '2401'"
                                >
                                    对公账户
                                </el-radio>
                                <el-radio
                                    label="75"
                                    :disabled="ruleForm.organization_type == '2' || ruleForm.organization_type == '3' || ruleForm.organization_type == '1708'"
                                >
                                    对私账户
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div class="container-form-content">
                            <el-form-item
                                label="银行账号"
                                prop="account_number"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-input
                                    v-model="ruleForm.account_number"
                                    size="small"
                                    placeholder="请填写银行账号"
                                />
                            </el-form-item>
                            <el-form-item
                                label="开户银行"
                                prop="account_bank"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-select
                                    v-model="ruleForm.account_bank"
                                    placeholder="请选择"
                                    class="container-form-input"
                                    size="small"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in bankList"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                label="开户银行全称(含支行)"
                                prop="bank_name"
                                class="container-form-content-input"
                                style="width:332px"
                                v-if="ruleForm.account_bank == '其他银行'"
                            >
                                <el-select
                                    v-model="ruleForm.bank_name"
                                    placeholder="需填写银行全称 如'深圳农村商业银行XXX支行'"
                                    class="container-form-input"
                                    size="small"
                                    clearable
                                    filterable
                                    remote
                                    reserve-keyword
                                    :remote-method="fnChangeBranchId"
                                    :loading="loading"
                                    @change="fnSetBranch()"
                                >
                                    <el-option
                                        v-for="item in bankBranchIdList"
                                        :key="item.bank_branch_id"
                                        :label="item.bank_name"
                                        :value=" item.bank_branch_id + '&' + item.bank_name "
                                    />
                                </el-select>
                                <el-popover
                                    placement="right"
                                    width="304"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        需填写银行全称，如"深圳农村商业银行XXX支行"
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:148px"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                            <el-form-item
                                label="开户名称"
                                prop="account_name"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-input
                                    v-model="ruleForm.account_name"
                                    size="small"
                                    placeholder="请填写开户名称"
                                />
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        1、如您选择的是【账户类型】为”对私账户“，则开户名称必须与身份证姓名一致。<br>
                                        2、如选择”对公账户“，则开户名称必须与营业执照上的“商户名称”一致。
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:64px"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                            <el-form-item
                                label="开户行所在城市"
                                prop="bank_address_code"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-cascader
                                    v-model="bank_address_code"
                                    :options="codeList"
                                    clearable
                                    filterable
                                    expand-trigger="click"
                                    :props="{
                                        label: 'name',
                                        value: 'address_code',
                                        children: 'city_list'
                                    }"
                                    @change="handleChangeCode"
                                />
                            </el-form-item>
                        </div>

                        <!-- 超级管理员信息 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 22 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                超级管理员信息
                                <span style="color:#999;font-size:14px;margin-left:11px">
                                    在开户后使用超级管理员的实名微信号进行签约且用于接收重要管理信息和进行资金操作，请确定其为商户法定代表人或负责人
                                </span>
                            </p>
                        </div>
                        <el-form-item
                            label="超级管理员类型"
                            prop="contact_type"
                        >
                            <el-radio-group v-model="ruleForm.contact_type">
                                <el-radio
                                    label="65"
                                >
                                    法定代表人/经营者
                                </el-radio>
                                <el-radio
                                    label="66"
                                    :disabled="ruleForm.organization_type == '2401'"
                                >
                                    负责人
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div class="container-form-content">
                            <el-form-item
                                label="超级管理员姓名"
                                prop="contact_name"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-input
                                    v-model="ruleForm.contact_name"
                                    size="small"
                                    placeholder="请填写管理员姓名"
                                />
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        1、若管理员类型为“法人/经营者”，则该姓名需与法人/经营者的身份证姓名一致。<br>
                                        2、若管理员类型为“负责人”，则可填写实际负责人的姓名。<br>
                                        3、须知：后续该管理员需使用实名微信号完成签约
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:107px"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                            <el-form-item
                                label="超级管理员身份证号码"
                                prop="contact_id_card_number"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-input
                                    v-model="ruleForm.contact_id_card_number"
                                    size="small"
                                    placeholder="请填写管理员身份证号码"
                                />
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        1、若管理员类型为“法人/经营者”，则该身份证号码需与法人/经营者的身份证号码一致。<br>
                                        2、若管理员类型为“负责人”，则可填写实际负责人的身份证号码。<br>
                                        3、如无身份证，可传来往内地通行证、来往大陆通行证、护照等证件号码<br>
                                        4、须知：超级管理员签约时，微信会校验您的微信号绑定的银行卡的实名信息，并判断是否与该证件号码一致
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:153px"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                            <el-form-item
                                label="超级管理员手机号"
                                prop="contact_mobile_phone"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-input
                                    v-model="ruleForm.contact_mobile_phone"
                                    size="small"
                                    placeholder="用于接收微信支付信息及日常操作验证码"
                                />
                                <el-popover
                                    placement="right"
                                    width="454"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        1、该手机号用于接收微信支付的重要管理信息及日常操作验证码 <br>
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:122px"
                                        maxlength="11"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                            <el-form-item
                                label="超级管理员邮箱"
                                prop="contact_email"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-input
                                    v-model="ruleForm.contact_email"
                                    size="small"
                                    placeholder="用于接收微信支付的开户邮件及日常业务通知"
                                />
                                <el-popover
                                    placement="right"
                                    width="330"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        用于接收微信支付的开户邮件及日常业务通知
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:108px"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                        </div>

                        <!-- 店铺信息 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 22 + 'px', marginBottom: '24px' }"
                        >
                            <p class="container-form-head-titles">
                                店铺信息
                            </p>
                        </div>
                        <div class="container-form-content">
                            <el-form-item
                                label="店铺名称"
                                prop="store_name"
                                class="container-form-content-input"
                            >
                                <el-input
                                    v-model="ruleForm.store_name"
                                    size="small"
                                    placeholder="请填写店铺名称"
                                />
                            </el-form-item>
                            <el-form-item
                                label="店铺链接"
                                prop="store_url"
                                class="container-form-content-input"
                            >
                                <el-input
                                    v-model="ruleForm.store_url"
                                    size="small"
                                    placeholder="请填写店铺链接"
                                />
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        请填写您的店铺主页，比如您的淘宝/天猫/京东/拼多多店铺主页的链接，复制粘贴即可
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:64px"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                            <el-form-item
                                label="商户简称"
                                prop="merchant_shortname"
                                class="container-form-content-input"
                            >
                                <el-input
                                    v-model="ruleForm.merchant_shortname"
                                    size="small"
                                    placeholder="请填写商户简称"
                                    maxlength="16"
                                />
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        1、请填写您的商户简称，比如：“腾讯”， 此简称将在支付完成页向买家展示。<br>
                                        2、最多16个汉字<br>
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        style="left:64px"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                            </el-form-item>
                        </div>

                        <!-- 特殊材料(选填) -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 22 + 'px'}"
                        >
                            <p class="container-form-head-titles">
                                特殊材料(选填)
                            </p>
                        </div>
                        <el-form-item
                            label="特殊资质"
                            style="margin-bottom:0"
                        >
                            <p class="container-form-titleDesc">
                                (请根据您店铺所属的行业，选择上传对应您所在行业的特殊资质，最多可上传5张)
                            </p>
                            <div style="display:flex;align-items:center">
                                <div
                                    v-for="(item,index) in ruleForm.qualifications"
                                    :key="index"
                                    class="container-form-uploadImg"
                                >
                                    <img
                                        :src="item.url"
                                        class="container-form-uploadImg-price"
                                    >
                                    <div
                                        class="container-form-uploadImg-create"
                                    >
                                        <i
                                            class="el-icon-delete"
                                            @click="fnRemovePics(index, 1)"
                                        />
                                        <i
                                            class="el-icon-zoom-in"
                                            @click="fnPreviewImg(ruleForm.qualifications)"
                                        />
                                    </div>
                                </div>
                                <div
                                    class="container-form-upload"
                                    @click="imageIndex = 6"
                                    v-if="ruleForm.qualifications.length < 5"
                                >
                                    <img
                                        src="@/assets/image/upload.png"
                                        alt="加载失败"
                                        class="container-form-upload-img"
                                    >
                                    <el-upload
                                        class="container-form-upload-change"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        list-type="picture-card"
                                        :show-file-list="false"
                                        :http-request="fnUploadImage"
                                        accept="image/*"
                                        :multiple="false"
                                        :limit="5"
                                    />
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="补充材料"
                            style="margin-bottom:0"
                        >
                            <p class="container-form-titleDesc">
                                (如果您有一些补充材料需要告知微信官方，可以在此处上传，最多可上传5张)
                            </p>
                            <div style="display:flex;align-items:center">
                                <div
                                    v-for="(item,index) in ruleForm.business_addition_pics"
                                    :key="index"
                                    class="container-form-uploadImg"
                                >
                                    <img
                                        :src="item.url"
                                        class="container-form-uploadImg-price"
                                    >
                                    <div
                                        class="container-form-uploadImg-create"
                                    >
                                        <i
                                            class="el-icon-delete"
                                            @click="fnRemovePics(index, 2)"
                                        />
                                        <i
                                            class="el-icon-zoom-in"
                                            @click="fnPreviewImg(ruleForm.business_addition_pics)"
                                        />
                                    </div>
                                </div>
                                <div
                                    class="container-form-upload"
                                    @click="imageIndex = 7"
                                    v-if="ruleForm.business_addition_pics.length < 5"
                                >
                                    <img
                                        src="@/assets/image/upload.png"
                                        alt="加载失败"
                                        class="container-form-upload-img"
                                    >
                                    <el-upload
                                        class="container-form-upload-change"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        list-type="picture-card"
                                        :show-file-list="false"
                                        :http-request="fnUploadImage"
                                        accept="image/*"
                                        :multiple="false"
                                        :limit="5"
                                    />
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="补充说明"
                            style="width:100%"
                        >
                            <div style="width:100%">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 6, maxRows: 10}"
                                    placeholder="如果您有一些补充说明需要告知微信官方，可以在此处说明"
                                    v-model="ruleForm.business_addition_desc"
                                    maxlength="512"
                                    show-word-limit
                                />
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <!-- phone code -->
            <div class="container-phone">
                <p class="container-phone-title">
                    短信验证码
                </p>
                <div class="container-phone-wrap">
                    <el-input
                        size="small"
                        placeholder="请输入短信验证码"
                        class="container-phone-wrap-code"
                        style="width:281px"
                        v-model="ruleForm.finance_phone_verify_code"
                    />
                    <el-button
                        type="primary"
                        class="container-phone-wrap-button"
                        @click="fnSendBindCode"
                        style="width:120px;height:36px;margin-left:30px"
                        :disabled="sendCode"
                    >
                        {{ !sendCode ? sendText : codeTime + 's' }}
                    </el-button>
                </div>
                <p class="container-phone-desc">
                    点击获取验证码，短信将发送到您绑定的手机号：{{ finance_phone }}，请注意查收
                </p>
            </div>

            <!-- button -->
            <div class="container-button">
                <el-button
                    type="default"
                    size="small"
                    style="width:120px;height:36px;margin-left:32px"
                    @click="fnSave()"
                >
                    保存
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="width:120px;height:36px;margin-left:32px"
                    @click="fnSubmit('ruleForm')"
                >
                    提交
                </el-button>
            </div>
        </div>

        <!-- 微信账户设置流程提交后状态 -->
        <div v-if="step == 2">
            <!-- 提交状态 -->
            <div
                v-if="audit_fail_reason.length == 0 && status == 1"
                class="container-flex"
            >
                <div class="container-success">
                    <img
                        src="@/assets/image/withdrawal-success.png"
                        alt="加载失败"
                        class="container-success-logo"
                    >
                    <p class="container-success-title">
                        提交成功
                    </p>
                    <p class="container-success-desc">
                        资料已提交审核，微信官方将第一时间审核，请耐心等待。
                    </p>
                    <p class="container-success-desc">
                        审核完成后，我们将短信通知您
                    </p>
                </div>
                <el-button
                    size="small"
                    class="container-success-button"
                    type="default"
                    @click="()=>{
                        this.$router.push({
                            name: 'accountSetting'
                        })
                    }"
                >
                    返回首页
                </el-button>
            </div>

            <!-- 审核失败状态 -->
            <div
                v-if="audit_fail_reason.length > 0 && status == 1"
                class="container-flex"
            >
                <div class="container-success">
                    <img
                        src="@/assets/image/fail.png"
                        alt="加载失败"
                        class="container-success-logo"
                    >
                    <p class="container-success-title">
                        资料审核未通过
                    </p>
                    <p
                        class="container-success-desc"
                        v-for="(item,index) in audit_fail_reason"
                        :key="index"
                    >
                        {{ item }}
                    </p>
                </div>
                <el-button
                    size="small"
                    class="container-success-button"
                    type="default"
                    @click="()=>{
                        step = 1;
                    }"
                >
                    重新填写
                </el-button>
            </div>

            <!-- 审核成功状态 -->
            <div
                class="container-flex"
                v-if="status == 2"
            >
                <div class="container-success">
                    <img
                        src="@/assets/image/withdrawal-success.png"
                        alt="加载失败"
                        class="container-success-logo"
                    >
                    <p class="container-success-title">
                        审核通过
                    </p>
                    <p class="container-success-desc">
                        您的资料信息已经审核完毕，快去验证账户吧～
                    </p>
                    <p class="container-success-remark">
                        法人微信扫码验证和银行打款验证任选一种验证即可
                    </p>
                </div>
                <div>
                    <el-button
                        size="small"
                        class="container-success-button"
                        type="primary"
                        style="color:#fff"
                        @click="fnAccountCation('weixin')"
                    >
                        法人微信扫码验证
                    </el-button>
                    <el-button
                        size="small"
                        class="container-success-button"
                        type="primary"
                        style="color:#fff"
                        @click="fnAccountCation('account')"
                        :style="{marginLeft: '36px'}"
                    >
                        银行打款验证
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 账户验证 -->
        <div v-if="verifiCation && step == 2">
            <!-- 验证一 -->
            <div v-if="result == 0">
                <div class="container-cation">
                    <p class="container-cation-title">
                        账户验证
                    </p>
                    <p class="container-cation-desc">
                        根据微信支付官方的要求，需要用指定的账户进行汇款来完成账户验证。请在<span style="color:#333">{{ account_validation.deadline }}</span>之前完成，超出时间，账户验证失败；验证结果我们将短信告知
                    </p>
                    <div class="container-cation-wrap">
                        <div :style="{display:'flex',width:'100%'}">
                            <div class="container-left">
                                <p class="container-left-head">
                                    汇款账户信息<span class="container-left-head-desc">请用以下账户汇款进行账户验证</span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="account_validation.account_name"
                                >
                                    <span class="container-left-info-title">
                                        汇款账户户名
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        v-clipboard:copy="account_validation.account_name"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.account_name }}
                                    </span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="account_validation.account_no"
                                >
                                    <span class="container-left-info-title">
                                        汇款账户卡号
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        v-clipboard:copy="account_validation.account_no"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.account_no }}
                                    </span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="Number(account_validation.pay_amount) > 0"
                                >
                                    <span class="container-left-info-title">
                                        汇款金额
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        v-clipboard:copy="account_validation.pay_amount ? (account_validation.pay_amount / 100).toFixed(2) * 1 : '0.00'"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.pay_amount ? (account_validation.pay_amount / 100).toFixed(2) * 1 : '0.00' }}元
                                    </span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="account_validation.remark"
                                >
                                    <span
                                        class="container-left-info-title"
                                        style="color:#EE4E59"
                                    >
                                        汇款时需备注:
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        style="color:#EE4E59"
                                        v-clipboard:copy="account_validation.remark"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.remark }}
                                    </span>
                                </p>
                            </div>
                            <div class="container-right">
                                <p class="container-left-head">
                                    收款账户信息<span class="container-left-head-desc">请用以下账户汇款进行账户验证</span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="account_validation.destination_account_name"
                                >
                                    <span class="container-left-info-titlert">
                                        收款账户户名
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        v-clipboard:copy="account_validation.destination_account_name"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.destination_account_name }}
                                    </span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="account_validation.destination_account_number"
                                >
                                    <span class="container-left-info-titlert">
                                        收款账户卡号
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        v-clipboard:copy="account_validation.destination_account_number"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.destination_account_number }}
                                    </span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="account_validation.destination_account_bank"
                                >
                                    <span class="container-left-info-titlert">
                                        收款账户开户行
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        v-clipboard:copy="account_validation.destination_account_bank"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.destination_account_bank }}
                                    </span>
                                </p>
                                <p
                                    class="container-left-info"
                                    v-if="account_validation.city"
                                >
                                    <span class="container-left-info-titlert">
                                        收款账户省市
                                    </span>
                                    <span
                                        class="container-left-info-content"
                                        v-clipboard:copy="account_validation.city"
                                        v-clipboard:success="copySuccess"
                                        v-clipboard:error="copyErr"
                                    >
                                        {{ account_validation.city }}
                                    </span>
                                </p>
                            </div>
                        </div>
                        <p
                            class="container-cation-wrap-deadline"
                            v-if="account_validation.deadline"
                            v-clipboard:copy="account_validation.deadline"
                            v-clipboard:success="copySuccess"
                            v-clipboard:error="copyErr"
                        >
                            汇款截止时间: {{ account_validation.deadline }}
                        </p>
                        <p
                            class="container-cation-wrap-foot"
                            v-if="account_validation.deadline"
                        >
                            请在该时间之前完成认证
                        </p>
                    </div>
                </div>
                <div class="container-cation-foot">
                    <el-button
                        size="small"
                        type="default"
                        style="width:120px;height:36px;"
                        @click="()=>{
                            this.$router.push({
                                name: 'accountSetting'
                            })
                        }"
                    >
                        返回首页
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        style="width:120px;height:36px;margin-left:64px"
                        @click="fnPayment()"
                    >
                        打款完成
                    </el-button>
                </div>
            </div>

            <!-- 验证二 -->
            <div v-if="result == 1">
                <div class="container-cation">
                    <p class="container-cation-title">
                        账户验证
                    </p>
                    <p class="container-cation-desc">
                        根据微信支付官方的要求，需要店铺的法人，用其微信扫一扫以下二维码，以完成账户验证，验证结果我们将短信告知
                    </p>
                    <div style="display:flex;align-items:center;flex-direction: column;">
                        <div class="container-cation-code">
                            <img
                                :src="legal_validation_url"
                                class="container-cation-code-img"
                            >
                        </div>
                        <p class="container-cation-code-desc">
                            请用店铺法人的微信进行扫码验证
                        </p>
                        <p
                            :style="{fontSize: '12px', cursor: 'pointer', marginTop: '12px', color: '#409eff'}"
                            @click="nextLealQrcode()"
                        >
                            (二维码加载失败？点击重新获取)
                        </p>
                    </div>
                </div>
                <div class="container-cation-foot">
                    <el-button
                        size="small"
                        type="default"
                        style="width:120px;height:36px;"
                        @click="()=>{
                            this.$router.push({
                                name: 'accountSetting'
                            })
                        }"
                    >
                        返回首页
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        style="width:120px;height:36px;margin-left:64px"
                        @click="fnPayment()"
                    >
                        已扫码验证
                    </el-button>
                </div>
            </div>

            <!-- 正在验证账户 -->
            <div
                v-if="audit_fail_reason.length == 0 && result == 3"
                class="container-flex"
            >
                <div class="container-success">
                    <img
                        src="@/assets/image/verfication.png"
                        alt="加载失败"
                        class="container-success-logo"
                    >
                    <p class="container-success-title">
                        正在验证账户
                    </p>
                    <p class="container-success-desc">
                        资料已提交审核，微信官方将第一时间审核，请耐心等待。
                    </p>
                    <p class="container-success-desc">
                        验证完成后，我们将短信通知您
                    </p>
                </div>
                <el-button
                    size="small"
                    class="container-success-button"
                    type="default"
                    @click="()=>{
                        this.$router.push({
                            name: 'accountSetting'
                        })
                    }"
                >
                    返回首页
                </el-button>
            </div>

            <!-- 验证失败状态 -->
            <div
                v-if="audit_fail_reason.length > 0 && result == -2"
                class="container-flex"
            >
                <div class="container-success">
                    <img
                        src="@/assets/image/fail.png"
                        alt="加载失败"
                        class="container-success-logo"
                    >
                    <p class="container-success-title">
                        验证失败
                    </p>
                    <p
                        class="container-success-desc"
                        v-for="(item,index) in audit_fail_reason"
                        :key="index"
                    >
                        {{ item }}
                    </p>
                </div>
                <el-button
                    size="small"
                    class="container-success-button"
                    type="default"
                    @click="()=>{
                        step = 1;
                        verifiCation = false;
                    }"
                >
                    重新填写
                </el-button>
            </div>
        </div>

        <!-- 待签约 -->
        <div v-if="step == 3">
            <div class="container-cation">
                <p class="container-cation-title">
                    账户签约
                </p>
                <p class="container-cation-desc">
                    根据微信支付官方的要求，请使用超级管理员的微信，扫一扫下方二维码，确认并完成签约
                </p>
                <div style="display:flex;align-items:center;flex-direction: column;">
                    <div class="container-cation-code">
                        <img
                            v-if="sign_url_load"
                            :src="sign_url"
                            class="container-cation-code-img"
                        >
                    </div>
                    <p class="container-cation-code-desc">
                        请用超级管理员的微信进行扫码
                    </p>
                    <p
                        :style="{fontSize: '12px', cursor: 'pointer', marginTop: '12px', color: '#409eff'}"
                        @click="nextQrcode()"
                    >
                        (二维码加载失败？点击重新获取)
                    </p>
                </div>
            </div>
            <div class="container-cation-foot">
                <el-button
                    size="small"
                    type="default"
                    style="width:120px;height:36px;"
                    @click="fnGoHome()"
                >
                    返回首页
                </el-button>
            </div>
        </div>

        <!-- 已完成 -->
        <div
            class="container-flex"
            v-if="step == 4"
        >
            <div class="container-success">
                <img
                    src="@/assets/image/withdrawal-success.png"
                    alt="加载失败"
                    class="container-success-logo"
                >
                <p class="container-success-title">
                    签约完成
                </p>
                <p class="container-success-desc">
                    恭喜您签约完成，可以去查看新商城财务系统了
                </p>
            </div>
            <el-button
                size="small"
                class="container-success-button"
                type="primary"
                style="color:#fff"
                @click="()=>{
                    this.$router.push({
                        name: 'accountSetting'
                    })
                }"
            >
                返回首页
            </el-button>
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import getFinanerPhone from '@/assets/mixin/check-info';
export default {
    mixins: [getFinanerPhone],
    components: {
        imgPreview
    },
    data () {
        const validateLicense = (rule, value, callback) => {
            if(value) {
                callback();
            } else {
                callback(new Error('身份证号不可以为空'));
            }
        };

        const validateNumber = (rule, value, callback) => {
            if(value && value.length < 9) {
                callback(new Error('最少输入9位字符(数字或符号)'));
            } else {
                callback();
            }
        };

        const validateName = (rule, value, callback) => {
            // const reg = /^[\u4E00-\u9FA5]{2,6}$/;

            // if(!reg.test(value)) {
            //     callback(new Error('请填写正确的姓名'));
            // } else {
            //     callback();
            // }
            callback();
        };

        const validateDoc = (rule, value, callback) => {
            if(value && value.length < 7) {
                callback(new Error('最少输入7位字符'));
            } else {
                callback();
            }
        };

        const validatePhone = (rule, value, callback) => {
            const reg = /^1[3456789]\d{9}$/;

            if(!reg.test(value)) {
                callback(new Error('请输入正确的手机号码'));
            } else {
                callback();
            }
        };

        const validateEmil = (rule, value, callback) => {
            const reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

            if(!reg.test(value)) {
                callback(new Error('请输入正确的邮箱地址'));
            } else {
                callback();
            }
        };

        const validateUrl = (rule, value, callback) => {
            if(value.indexOf('http') > -1) {
                callback();
            } else {
                callback(new Error('请输入正确的店铺链接'));
            }
        };


        return {
            sign_url_load: false,
            sign_url_copy: '',
            sign_url: '',//签约二维码
            account_validation: {//汇款信息
                remark: '',
                city: '',
                destination_account_number: '',
                destination_account_name: '',
                pay_amount: '',
                account_no: '',
                deadline: '',
                account_name: '',
                destination_account_bank: ''
            },
            legal_validation_url_copy: '',
            legal_validation_url: '',//签约二维码
            result: -1,//-1:默认值 0:汇款 1:二维码 3:正在验证账户 -2:验证失败
            verifiCation: false,//是否打开账户验证，前提已经审核通过
            status: -1,//审核状态 2:待验证账户 1:待资料检验
            audit_fail_reason: [],//审核失败原因,默认不会查询，提交后会查询
            step: 2,//步骤图状态
            codeList: [],//省市编码列表
            bankList: [],//开户银行数据列表
            bankBranchIdList: [],//开户银行全称(含支行)数据源
            ruleForm: {
                organization_type: '',//主体类型
                business_license_copy_url: '',//证件扫描件
                business_license_copy_media_id: '',//证件扫描件MediaID
                business_license_number: '',//证件注册号
                merchant_name: '',//商户名称
                legal_person: '',//经营者/法定代表人姓名
                company_address: '',//注册地址
                business_start_time: '',//营业期限开始时间
                business_end_time: '',//营业期限结束时间
                organization_copy_url: '',//组织机构代码证照片地址
                organization_copy_media_id: '',//组织机构代码证照片MediaID
                organization_number: '',//组织机构代码
                organization_start_time: '',//组织机构代码有效期限开始时间
                organization_end_time: '',//织机构代码有效期限结束时间
                id_doc_type: '1',//经营者/法人证件类型
                id_card_copy_url: '',//身份证人像面照片地址
                id_card_copy_media_id: '',//身份证人像面照片MediaID
                id_card_national_url: '',//身份证国徽面照片地址
                id_card_national_media_id: '',//身份证国徽面照片MediaID
                id_card_name: '',//身份证姓名
                id_card_number: '',//身份证号码
                id_card_valid_time: '',//身份证有效期限
                id_doc_copy_url: '',//其他类型证件照片地址
                id_doc_copy_media_id: '',//其他类型证件照片mediaID
                id_doc_name: '',//其他类型证件姓名
                id_doc_number: '',//其他类型证件号码
                id_doc_period_end: '',//其他类型证件结束日期
                bank_account_type: '',//账户类型, 74:对公账户, 75:对私账户
                account_bank: '',//开户银行
                account_name: '',//开户名称
                bank_address_code: '',//开户银行省市编码
                bank_branch_id: '',//开户银行联行号
                bank_name: '',//开户银行全称 （含支行)
                account_number: '',//银行帐号
                contact_type: '',//超级管理员类型, 65:法人/经营者, 66:负责人
                contact_name: '',//超级管理员姓名
                contact_id_card_number: '',//超级管理员身份证件号码
                contact_mobile_phone: '',//超级管理员手机
                contact_email: '',//超级管理员邮箱
                store_name: '',//店铺名称
                store_url: '',//店铺链接
                merchant_shortname: '',//商户简称
                qualifications: [],//特殊资质, json字符串, [{"url":"","media_id":""}]
                business_addition_pics: [],//补充材料, json字符串, [{"url":"","media_id":""}]
                business_addition_desc: '',//补充说明
                apply: '',//类型, 1:发起申请, 0:仅保存
                finance_phone_verify_code: ''//财务手机验证码, 验证码type=102
            },
            bank_address_code: [],//存储开户银行省市编码
            business_end_last_time: false,//营业期限是否选择长期
            organization_end_last_time: false,//组织机构代码证是否选择长期
            id_card_valid_last_time: false,//身份证有效期限是否选择长期
            id_doc_period_last_end: false,//其他类型证件是否选择长期
            rules: {
                store_url: [
                    { validator: validateUrl, type: 'number', message: '请输入正确的店铺链接', trigger: 'blur' },
                    { required: true, message: '请填写店铺链接', trigger: 'change' }
                ],
                merchant_shortname: [
                    { required: true, message: '请填写店铺简介', trigger: 'change' }
                ],
                store_name: [
                    { required: true, message: '请填写店铺名称', trigger: 'change' }
                ],
                contact_email: [
                    { validator: validateEmil, type: 'number', message: '请输入正确的邮箱地址', trigger: 'blur' },
                    { required: true, message: '请填写管理员邮箱', trigger: 'change' }
                ],
                contact_mobile_phone: [
                    { validator: validatePhone, type: 'number', message: '请输入正确的手机号', trigger: 'blur' },
                    { required: true, message: '请填写管理员手机号', trigger: 'change' }
                ],
                contact_id_card_number: [
                    { validator: validateLicense, type: 'number', trigger: 'blur' },
                    { required: true, message: '请填写管理员身份证号码', trigger: 'change' }
                ],
                contact_name: [
                    { validator: validateName, type: 'number', message: '最填写正确的姓名', trigger: 'blur' },
                    { required: true, message: '请填写管理员姓名', trigger: 'change' }
                ],
                contact_type: [
                    { required: true, message: '请选择管理员类型', trigger: 'change' }
                ],
                bank_address_code: [
                    { required: true, message: '请选择开户行所在城市', trigger: 'change' }
                ],
                account_number: [
                    { required: true, message: '请填写银行账号', trigger: 'change' }
                ],
                bank_name: [
                    { required: true, message: '请填写开户银行全称', trigger: 'change' }
                ],
                account_name: [
                    { required: true, message: '请填写开户名称', trigger: 'change' }
                ],
                account_bank: [
                    { required: true, message: '请选择开户银行', trigger: 'change' }
                ],
                bank_account_type: [
                    { required: true, message: '请选择账户类型', trigger: 'change' }
                ],
                id_doc_number: [
                    { validator: validateDoc, type: 'number', message: '最少输入7位字符', trigger: 'blur' },
                    { required: true, message: '请填写证件号码', trigger: 'change' }
                ],
                id_doc_name: [
                    { validator: validateName, type: 'number', message: '最填写正确的姓名', trigger: 'blur' },
                    { required: true, message: '请填写证件姓名', trigger: 'change' }
                ],
                id_doc_copy_url: [
                    { required: true, message: '请上传您的证件', trigger: 'change' }
                ],
                id_card_valid_time: [
                    { required: true, message: '请选择身份证有效期限', trigger: 'change' }
                ],
                id_card_number: [
                    { validator: validateLicense, type: 'number', message: '最少输入15位字符', trigger: 'blur' },
                    { required: true, message: '请填写身份证号码', trigger: 'change' }
                ],
                id_card_name: [
                    { validator: validateName, type: 'number', message: '最填写正确的姓名', trigger: 'blur' },
                    { required: true, message: '请填写身份证姓名', trigger: 'change' }
                ],
                id_card_national_url: [
                    { required: true, message: '请上传您的身份证', trigger: 'change' }
                ],
                id_card_copy_url: [
                    { required: true, message: '请上传您的身份证', trigger: 'change' }
                ],
                organization_type: [
                    { required: true, message: '请选择您的主体类型', trigger: 'change' }
                ],
                business_license_copy_url: [
                    { required: true, message: '请上传您的证件', trigger: 'change' }
                ],
                business_license_number: [
                    { validator: validateLicense, type: 'number', message: '最少输入15位字符', trigger: 'blur' },
                    { required: true, message: '请填写您的证件注册号', trigger: 'blur' }
                ],
                merchant_name: [
                    { required: true, message: '请填写您的商户名称', trigger: 'change' }
                ],
                legal_person: [
                    { validator: validateName, type: 'number', message: '请填写正确的姓名', trigger: 'blur' },
                    { required: true, message: '请填写经营者/法定代表人姓名', trigger: 'change' }
                ],
                company_address: [
                    { required: true, message: '请填写注册地址', trigger: 'change' }
                ],
                business_start_time: [
                    { required: true, message: '请选择营业期限', trigger: 'change' }
                ],
                business_end_time: [
                    { required: true, message: '请选择营业期限', trigger: 'change' }
                ],
                organization_copy_url: [
                    { required: true, message: '请上传您的组织机构代码证照片', trigger: 'change' }
                ],
                organization_number: [
                    { validator: validateNumber, type: 'number', message: '最少输入9位字符', trigger: 'blur' },
                    { required: true, message: '请填写组织机构代码', trigger: 'change' }
                ],
                organization_end_time: [
                    { required: true, message: '请选择组织机构有效期限', trigger: 'change' }
                ],
                id_doc_type: [
                    { required: true, message: '请选择证件类型', trigger: 'change' }
                ]
            },
            organizationType: [{
                value: '2401',
                label: '小微商户'
            },{
                value: '4',
                label: '个体工商户'
            },{
                value: '2',
                label: '企业'
            },{
                value: '3',
                label: '党政、机关及事业单位'
            },{
                value: '1708',
                label: '其他组织'
            }],
            idDocTypeList: [{
                value: '1',
                label: '中国大陆居民-身份证'
            },{
                value: '2',
                label: '其他国家或地区居民-护照'
            },{
                value: '3',
                label: '中国香港居民–来往内地通行证'
            },{
                value: '4',
                label: '中国澳门居民–来往内地通行证'
            },{
                value: '5',
                label: '中国台湾居民–来往大陆通行证'
            }],
            update: true, //更新上传图片组件
            imageIndex: '', //查询上传图片索引
            loading: false,
            //获取验证码字段
            finance_phone: '',//财务手机号
            sendCode: false,
            computedTime: 'time',
            sendText: '获取验证码',
            codeTime: 60,
        };
    },
    created () {
        if(process.client){
            this.$store.commit('theme/SET_HEADER', [
                {title: '商城模块'},
                {title: '商城财务', path: '/finance'},
                {title: '微信账户设置'}
            ]);
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化表单数据
         * @param   {Function}      getBankList         //获取开户银行数据列表
         * @param   {Function}      getCodeList         //获取省市编码列表
         * @param   {Function}      getFinanerPhone     //获取财务手机号
         * @param   {Function}      fnCheckStep         //查询当前状态
         * @param   {Function}      getApplyInfo        //查询申请表单信息
         * @param   {Function}      fnCheckResult       //查询申请结果
         */
        init () {
            this.fnCheckStep();
            this.getApplyInfo();
            this.getCodeList();
            this.getBankList();
            this.getFinanerPhone(resp=>{
                if(resp && resp.phone) {
                    this.finance_phone = resp.phone;
                }
            });

            // 异常处理，刷新query参数丢失
            if(JSON.stringify(this.$route.query) == '{}') {
                this.$router.push({
                    name: 'accountSetting'
                });
            }
        },

        /**
         * @description 账户验证打款完成,查询结果
         * 三种结果:
         *  验证完成后提交审核状态值3
         *  验证失败状态值-2
         *  如果还是待验证的状态给你提示信息，状态值2
         */
        fnPayment () {
            //测试数据
            // this.result = 3;
            // 测试数据

            this.fnCheckResult(resp=>{
                if(resp.status == 3) {
                    this.result = 3;
                } else if(resp.status == -2) {
                    this.result = -2;
                    this.audit_fail_reason = resp.audit_fail_reason;
                } else if (resp.status == 2) {
                    this.$notify({
                        title: '警告',
                        message: '请检查是否已打款完成,可能存在延时,请稍后重试',
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 资料提交成功后账户验证
         */
        fnAccountCation (type) {
            // 测试数据
            // this.result = 0;
            // this.verifiCation = true;
            // this.status = -1;
            // this.getResult();
            // 测试数据

            this.fnCheckResult(resp=>{
                if(resp.status == 2) {
                    const account_validation = resp.account_validation || null;
                    const url = resp.legal_validation_url || null;
                    const account_status = (Object.prototype.toString.call(account_validation) !== '[object Null]') && (JSON.stringify(account_validation) !== '{}');
                    const url_status = Object.prototype.toString.call(url) !== '[object Null]';

                    if(url_status && type == 'weixin') {
                        this.result = 1;
                        this.legal_validation_url_copy = JSON.parse(JSON.stringify(resp.legal_validation_url));
                        this.legal_validation_url = resp.legal_validation_url;
                        this.getResult();
                        this.nextLealQrcode();
                    }
                    if(account_status && type == 'account') {
                        this.result = 0;
                        this.account_validation = {
                            ...resp.account_validation
                        };
                    }
                    if(!account_status && !url_status) {
                        this.result = -1;
                        this.$notify({
                            title: '警告',
                            message: '返回结果异常,请稍后重试',
                            type: 'warning'
                        });
                    }
                    this.status = -1;
                    this.verifiCation = true;
                } else if (resp.status == 3) {
                    this.$router.push({
                        name: 'accountSetting'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: '返回结果异常,请稍后重试',
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 法人二维码验证实时查询结果
         */
        getResult () {
            this.$post('/Ecommerce/getApplyStatus',{},resp=>{
                if(resp.code == 1) {
                    const wxpay = resp.data.wxpay;

                    if(wxpay.status == 3) { //正在验证账户
                        this.result = 3;
                        clearTimeout(this.applyTime);
                        return;
                    }

                    if(wxpay.status == -2) {
                        this.result = -2;
                        this.fnCheckResult(resp=>{
                            this.audit_fail_reason = resp.audit_fail_reason;
                        });
                        clearTimeout(this.applyTime);
                        return;
                    }

                    if(wxpay.status == 2) {
                        this.applyTime = setTimeout(()=>{
                            this.getResult();
                        },2000);
                    }
                }
            });
        },

        /**
         * @description 签约二维码页面返回首页
         */
        fnGoHome () {
            clearTimeout(this.singTime);
            this.$router.push({
                name: 'accountSetting'
            });
        },

        /**
         * @description 账户签约实时查询
         */
        getSiging () {
            this.$post('/Ecommerce/getApplyStatus',{},resp => {
                if(resp.code == 1) {
                    const wxpay = resp.data.wxpay;

                    if(wxpay.status == 5) { //签约完成
                        this.step = 4;
                        clearTimeout(this.singTime);
                        return;
                    }

                    if(wxpay.status == 4) {
                        this.singTime = setTimeout(()=>{
                            this.getSiging();
                        },2000);
                    }
                }
            });
        },

        /**
         * @description 查询当前状态
         */
        fnCheckStep () {
            let type = Object.prototype.toString.call(this.$route.query.step);

            if(type == '[object Number]' || type == '[object String]') {
                this.step = Number(this.$route.query.step);
                if(this.step == 3) {
                    this.getSiging();
                    this.fnCheckResult(resp=>{
                        if(resp.status == 4) {
                            this.sign_url_copy = JSON.parse(JSON.stringify(resp.sign_url));
                            this.sign_url = resp.sign_url;
                            this.nextQrcode();
                        }
                    });
                }
            }

            if(this.$route.query.audit_fail_reason) {
                this.audit_fail_reason = JSON.parse(this.$route.query.audit_fail_reason);
            }

            if(this.$route.query.status) {
                this.status = this.$route.query.status;
            }

            // 验证失败
            if(this.$route.query.result && this.$route.query.verifiCation && this.$route.query.audit_fail_reason) {
                this.result = this.$route.query.result;
                this.verifiCation = this.$route.query.verifiCation;
                this.audit_fail_reason = JSON.parse(this.$route.query.audit_fail_reason);
            }

            // 正在验证账户
            if(this.$route.query.result && this.$route.query.verifiCation) {
                this.result = this.$route.query.result;
                this.verifiCation = this.$route.query.verifiCation;
            }
        },

        /**
         * @description 获取申请表单信息
         */
        getApplyInfo () {
            this.$post('/EcommerceWxpay/getApplyInfo',{},resp => {
                if(resp.code == 1) {
                    if(Object.prototype.toString.call(resp.data) !== '[object Null]') {
                        this.ruleForm = {
                            ...resp.data
                        };

                        //特殊字段单独处理
                        if(this.ruleForm.business_end_time == '长期'){
                            this.$set(this.ruleForm, 'business_end_time', '');
                            this.business_end_last_time = true;
                        }
                        if(this.ruleForm.organization_end_time == '长期'){
                            this.$set(this.ruleForm, 'organization_end_time', '');
                            this.organization_end_last_time = true;
                        }
                        if(this.ruleForm.id_card_valid_time == '长期'){
                            this.$set(this.ruleForm, 'id_card_valid_time', '');
                            this.id_card_valid_last_time = true;
                        }
                        if(this.ruleForm.id_doc_period_end == '长期'){
                            this.$set(this.ruleForm, 'id_doc_period_end', '');
                            this.id_doc_period_last_end = true;
                        }

                        //开户所在城市处理
                        this.codeList.forEach(element => {
                            if(element.city_list) {
                                element.city_list.forEach(option=>{
                                    if(option.address_code == this.ruleForm.bank_address_code) {
                                        this.bank_address_code = [
                                            element.address_code,
                                            option.address_code
                                        ];
                                        return false;
                                    }
                                });
                            }
                        });
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交表单
         */
        fnSubmit (formName) {
            console.log(this.ruleForm);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //不同条件下对几个日期字段单独判断
                    if(this.ruleForm.organization_type == '3' || this.ruleForm.organization_type == '1708') {
                        if(!this.business_end_last_time && this.ruleForm.business_end_time == '') {
                            this.$notify({
                                title: '警告',
                                message: '营业期限不可以为空',
                                type: 'warning'
                            });
                            return;
                        }
                    }

                    if((this.ruleForm.organization_type == '2' || this.ruleForm.organization_type == '3' || this.ruleForm.organization_type == '1708') && this.ruleForm.business_license_number.length !== 18) {
                        if(!this.organization_end_last_time && this.ruleForm.organization_end_time == '') {
                            this.$notify({
                                title: '警告',
                                message: '组织机构代码有效期不可以为空',
                                type: 'warning'
                            });
                            return;
                        }
                    }

                    if(this.ruleForm.id_doc_type == '1') {
                        if(!this.id_card_valid_last_time && this.ruleForm.id_card_valid_time == '') {
                            this.$notify({
                                title: '警告',
                                message: '身份证有效期限不可以为空',
                                type: 'warning'
                            });
                            return;
                        }
                    }

                    if(this.ruleForm.id_doc_type !== '1') {
                        if(!this.id_doc_period_last_end && this.ruleForm.id_doc_period_end == '') {
                            if(!this.id_card_valid_last_time && this.ruleForm.id_card_valid_time == '') {
                                this.$notify({
                                    title: '警告',
                                    message: '经营者/法人证件结束日期不可以为空',
                                    type: 'warning'
                                });
                                return;
                            }
                        }
                    }

                    this.$post('/EcommerceWxpay/apply',{
                        ...this.ruleForm,
                        //覆盖要修改的数据
                        business_start_time: this.fnDateFilter(this.ruleForm.business_start_time),
                        business_end_time: this.business_end_last_time ? '长期' : this.fnDateFilter(this.ruleForm.business_end_time),
                        organization_start_time: this.fnDateFilter(this.ruleForm.organization_start_time),
                        organization_end_time: this.organization_end_last_time ? '长期' : this.fnDateFilter(this.ruleForm.organization_end_time),
                        id_card_valid_time: this.id_card_valid_last_time ? '长期' : this.fnDateFilter(this.ruleForm.id_card_valid_time),
                        id_doc_period_end: this.id_doc_period_last_end ? '长期' : this.fnDateFilter(this.ruleForm.id_doc_period_end),
                        qualifications: JSON.stringify(this.ruleForm.qualifications),
                        business_addition_pics: JSON.stringify(this.ruleForm.business_addition_pics),
                        apply: 1
                    },resp=>{
                        if(resp.code == 1) {
                            this.$notify({
                                title: '成功',
                                message: '提交成功',
                                type: 'success'
                            });
                            //清空未通过状态
                            this.audit_fail_reason = [];
                            this.$router.push(this.$route.path);
                            // 查询结果跳转提交或失败页面
                            this.fnCheckResult(resp=>{
                                this.status = resp.status;
                                if(resp.status == 1) {
                                    this.step = 2;
                                } else if(resp.status == -1) {
                                    this.audit_fail_reason = resp.audit_fail_reason;
                                }
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: '请填写未通过的必填项',
                        type: 'warning'
                    });
                    return false;
                }
            });
        },

        /**
         * @description 查询提交结果
         */
        fnCheckResult (callback) {
            this.$post('/EcommerceWxpay/getApplyResult',{},resp => {
                if(resp.code == 1) {
                    callback(resp.data);
                }
            });
        },

        /**
         * @description保存表单
         * 条件:必填项全填完
         */
        fnSave () {
            if(!this.ruleForm.organization_type) {
                this.$notify({
                    title: '警告',
                    message: '主体类型不可以为空',
                    type: 'warning'
                });
                return;
            }

            if(!this.ruleForm.finance_phone_verify_code) {
                this.$notify({
                    title: '警告',
                    message: '财务手机验证码不可以为空',
                    type: 'warning'
                });
                return;
            }

            this.$post('/EcommerceWxpay/apply',{
                ...this.ruleForm,
                //覆盖要修改的数据
                business_start_time: this.fnDateFilter(this.ruleForm.business_start_time),
                business_end_time: this.business_end_last_time ? '长期' : this.fnDateFilter(this.ruleForm.business_end_time),
                organization_start_time: this.fnDateFilter(this.ruleForm.organization_start_time),
                organization_end_time: this.organization_end_last_time ? '长期' : this.fnDateFilter(this.ruleForm.organization_end_time),
                id_card_valid_time: this.id_card_valid_last_time ? '长期' : this.fnDateFilter(this.ruleForm.id_card_valid_time),
                id_doc_period_end: this.id_doc_period_last_end ? '长期' : this.fnDateFilter(this.ruleForm.id_doc_period_end),
                qualifications: JSON.stringify(this.ruleForm.qualifications),
                business_addition_pics: JSON.stringify(this.ruleForm.business_addition_pics),
                apply: 0
            },resp => {
                if(resp.code == 1) {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 日期时间过滤
         */
        fnDateFilter (time) {
            const type = Object.prototype.toString.call(time);

            console.log(time, type, 'time');
            if(time !== '' || time !== null) {
                let year = new Date(time).getFullYear();
                let month = new Date(time).getMonth() + 1;
                let day = new Date(time).getDate();
                let date = '';

                month = month < 10 ? '0' + month : month;
                day = day < 10 ? '0' + day : day;
                date = year + '-' + month + '-' + day;

                return date;
            } else {
                return '';
            }
        },

        /**
         * @description 获取营业期限截止时间
         */
        fngetBusiness (type) {
            if(type == 1) {
                if(this.ruleForm.business_end_time === null) {
                    this.$nextTick(()=>{
                        this.$set(this.ruleForm, 'business_end_time', '');
                    });
                }
            } else if(type == 2) {
                if(this.ruleForm.organization_end_time === null) {
                    this.$nextTick(()=>{
                        this.$set(this.ruleForm, 'organization_end_time', '');
                    });
                }
            } else if(type == 3) {
                if(this.ruleForm.id_card_valid_time === null) {
                    this.$nextTick(()=>{
                        this.$set(this.ruleForm, 'id_card_valid_time', '');
                    });
                }
            } else if(type == 4) {
                if(this.ruleForm.id_doc_period_end === null) {
                    this.$nextTick(()=>{
                        this.$set(this.ruleForm, 'id_doc_period_end', '');
                    });
                }
            }
        },

        /**
         * @description 发送验证码
         */
        fnSendBindCode () {
            this.sendCode = true;
            this.fnCompitedTime();
            this.$post('/FinanceUser/sendPhoneVerifyCode',{
                type: 102
            },resp => {
                if (resp.code == 1) {
                    this.$notify({
                        title: '成功',
                        message: '发送成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
        * @description 计时器递归调用
        */
        fnCompitedTime (param) {
            let arr = Array.prototype.slice.call(arguments);

            if(this.codeTime == 60 || arr.length > 0) {
                clearTimeout(this.computedTime);
                this.computedTime = setTimeout(()=>{
                    if(this.codeTime > 0) {
                        this.codeTime--;
                        this.fnCompitedTime(1);
                    } else {
                        this.sendText = '再次发送';
                        this.sendCode = false;
                        this.codeTime = 60;
                        clearTimeout(this.computedTime);
                        return;
                    }
                },1000);
            }
        },

        /**
         * @description 选择省市编码
         */
        handleChangeCode () {
            this.ruleForm.bank_address_code = this.bank_address_code.length> 0 ? (this.bank_address_code.length > 1 ? this.bank_address_code[1] : this.bank_address_code[0]) : '';
        },

        /**
         * @description 获取省市编码列表
         */
        getCodeList () {
            this.$post('/EcommerceWxpay/getAddressCodeList',{},resp => {
                if(resp.code == 1) {
                    this.codeList = resp.data.province_list;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 获取开户银行列表,手动添加其他银行
         */
        getBankList () {
            this.$post('/EcommerceWxpay/getAccountBankList',{},resp => {
                if(resp.code == 1) {
                    this.bankList = resp.data.list;
                    this.bankList.unshift('其他银行');
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 开户银行选择
         */
        fnChangeBranchId (query, status) {
            let keyword = query;

            if(keyword) {
                this.loading = true;
                this.$post('/EcommerceWxpay/getAccountBankFullList',{
                    keyword: keyword
                },resp => {
                    if(resp.code == 1) {
                        this.bankBranchIdList = resp.data.list;
                        this.loading = false;
                    }
                });
            } else {
                return;
            }
        },

        /**
         * @description 设置银行id和名称
         */
        fnSetBranch () {
            let value = [];

            value = this.ruleForm.bank_name ? this.ruleForm.bank_name.split('&') : '';
            this.ruleForm.bank_branch_id = value.length > 0 ? value[0] : '';
            this.ruleForm.bank_name = value.length > 0 ? value[1] : '';
        },

        /**
         * @description 证件类型选择
         */
        fnChangeOrigan () {
            if(this.ruleForm.organization_type == '2401') {
                this.idDocTypeList = [{
                    value: '1',
                    label: '中国大陆居民-身份证'
                }];
                this.ruleForm.bank_account_type = '75';
            } else {
                this.idDocTypeList = [{
                    value: '1',
                    label: '中国大陆居民-身份证'
                },{
                    value: '2',
                    label: '其他国家或地区居民-护照'
                },{
                    value: '3',
                    label: '中国香港居民–来往内地通行证'
                },{
                    value: '4',
                    label: '中国澳门居民–来往内地通行证'
                },{
                    value: '5',
                    label: '中国台湾居民–来往大陆通行证'
                }];
            }

            if(this.ruleForm.organization_type == '2' || this.ruleForm.organization_type == '3' || this.ruleForm.organization_type == '1708') {
                this.ruleForm.bank_account_type = '74';
            }
        },

        /**
         * @description 预览图片
         */
        fnPreviewImg (url) {
            const type = Object.prototype.toString.call(url);

            console.log(url,'url');
            if(type == '[object Array]') {
                let list = [];

                url.forEach(item=>{
                    list.push(item.url);
                });

                setTimeout(()=>{
                    this.$refs.preview.show(list,0);
                },100);
            } else if(type == '[object String]') {
                this.$refs.preview.show([
                    url
                ]);
            } else {
                this.$notify({
                    title: '警告',
                    message: '未知类型',
                    type: 'warning'
                });
            }
        },

        /**
         * @description 删除特殊材料图片
         */
        fnRemovePics (index,type) {
            if(type == 1) {
                this.ruleForm.qualifications.splice(index,1);
            } else if(type == 2) {
                this.ruleForm.business_addition_pics.splice(index,1);
            }
        },

        /**
         * @description 图片上传
         */
        fnUploadImage(e) {
            let pic = new FormData();

            pic.append('picture', e.file);
            this.$upload('/EcommerceWxpay/uploadPicture', pic, resp => {
                if (resp.code == 1) {
                    setTimeout(()=>{
                        if(this.imageIndex == 1) {
                            this.$set(this.ruleForm, 'business_license_copy_url', resp.data.url);
                            this.$set(this.ruleForm, 'business_license_copy_media_id', resp.data.media_id);
                        } else if(this.imageIndex == 2) {
                            this.$set(this.ruleForm, 'organization_copy_url', resp.data.url);
                            this.$set(this.ruleForm, 'organization_copy_media_id', resp.data.media_id);
                        } else if(this.imageIndex == 3) {
                            this.$set(this.ruleForm, 'id_card_copy_url', resp.data.url);
                            this.$set(this.ruleForm, 'id_card_copy_media_id', resp.data.media_id);
                        } else if(this.imageIndex == 4){
                            this.$set(this.ruleForm, 'id_card_national_url', resp.data.url);
                            this.$set(this.ruleForm, 'id_card_national_media_id', resp.data.media_id);
                        } else if(this.imageIndex == 5) {
                            this.$set(this.ruleForm, 'id_doc_copy_url', resp.data.url);
                            this.$set(this.ruleForm, 'id_doc_copy_media_id', resp.data.media_id);
                        } else if(this.imageIndex == 6) {
                            let list = [{
                                url: resp.data.url,
                                media_id: resp.data.media_id
                            }];

                            this.ruleForm.qualifications = this.ruleForm.qualifications.concat(list);

                            if(this.ruleForm.qualifications.length > 5) {//防止上传多于5张处理
                                this.ruleForm.qualifications = this.ruleForm.qualifications.splice(-5);
                            }
                        } else if(this.imageIndex == 7) {
                            let list = [{
                                url: resp.data.url,
                                media_id: resp.data.media_id
                            }];

                            this.ruleForm.business_addition_pics = this.ruleForm.business_addition_pics.concat(list);

                            if(this.ruleForm.business_addition_pics.length > 5) {//防止上传多于5张处理
                                this.ruleForm.business_addition_pics = this.ruleForm.business_addition_pics.splice(-5);
                            }
                        }
                    },100);
                    e.onSuccess({
                        url: resp.data.url,
                        status: 'success'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        center: true
                    });
                    e.onError();
                }
            });
        },

        /**
         * @description 重新获取二维码
         */
        nextQrcode () {
            this.$post('/QrCode/getUrl',{
                content: this.sign_url_copy,
                size: 262
            },resp => {
                if(resp.code == 1) {
                    this.sign_url_load = true;
                    this.sign_url = resp.data.qrcode_url;//更新二维码
                    this.$notify({
                        title: '成功',
                        message: '获取成功',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        nextLealQrcode () {
            this.$post('/QrCode/getUrl',{
                content: this.legal_validation_url_copy,
                size: 262
            },resp => {
                if(resp.code == 1) {
                    this.legal_validation_url = resp.data.qrcode_url;//更新二维码
                    this.$notify({
                        title: '成功',
                        message: '获取成功',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 复制
         */
        copySuccess(e){
            this.$message({
                center: true,
                message: '复制成功',
                type: 'success'
            });
        },
        copyErr(e){
            console.log(e);
            this.$notify({
                title: '',
                message: '复制失败，请稍后重试',
                duration: 2000,
                type: 'warning'
            });
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 0px 0px 44px 0px;
    margin-top: 0 !important;
    background: #ffffff;
    .container-fail {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 12px 32px;
        line-height: 22px;
        flex-wrap: wrap;
        background-color: #ffffff;
        .el-icon-warning {
            color: #FF3030;
            font-size: 14px;
            margin-right: 12px;
        }
        &-text {
            color: #FF3030;
            font-size: 14px;
        }
        &-seat {
            width: 100%;
            height: 10px;
            background-color: #F0F2F7;
        }
    }
    .container-header {
        padding: 24px 0 24px 24px;
        color: #3F454B;
        font-size: 24px;
        font-weight: 500;
        border-bottom: 1px #F0F2F7 solid;
        margin-bottom: 32px;
    }
    .container-step {
        width: 100%;
        padding: 20px 32px 18px 32px;
    }
    .container-form {
        width: calc(100% - 64px);
        margin: 0 auto;
        background:rgba(251,251,251,1);
        border:1px solid rgba(238,238,238,1);
        box-sizing: border-box;
        padding: 32px;
        display: flex;
        flex-direction: column;
        &-head {
            width: 100%;
            position: relative;
            box-sizing: border-box;
            &-title {
                color: #3F454B;
                font-size: 18px;
                font-weight: 500;
            }
            &-titles {
                color: #333333;
                font-size: 16px;
                padding-bottom: 16px;
                font-weight: 500;
            }
            &-desc {
                color: #999999;
                font-size: 14px;
                margin: 14px 0 24px 0;
            }
            &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 1px;
                background-color: #EBEEF5;
            }
        }
        &-fix {
            height: 14px;
            margin: 16px 0 20px 0;
            display: flex;
            align-items: center;
            &-title {
                color: #333333;
                font-size: 14px;
                position: relative;
                margin-left: 10px;
                &::after {
                    position: absolute;
                    content: '*';
                    font-size: 14px;
                    color: #FF3030;
                    left: -6px;
                    top: 0;
                }
            }
            &-desc{
                color: #999999;
                font-size: 14px;
                margin-left: 10px;
            }
        }
        &-input {
            width: 332px;
            height: 36px;
        }
        &-tip {
            margin-left: 16px;
            text-decoration: underline;
        }
        &-upload {
            width: 100px;
            height: 100px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            &-img {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            &-price {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 4;
            }
            &-change {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                opacity: 0;
            }
            &-create {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.5);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 12;
                cursor: pointer;
                .el-icon-delete {
                    font-size: 16px;
                    color: #ffffff;
                    margin-right: 18px;
                }
                .el-icon-zoom-in {
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        &-uploadImg {
            width: 100px;
            height: 100px;
            overflow: hidden;
            position: relative;
            margin-right: 20px;
            &-price {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 5;
            }
            &-create {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.5);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 12;
                cursor: pointer;
                .el-icon-delete {
                    font-size: 16px;
                    color: #ffffff;
                    margin-right: 18px;
                }
                .el-icon-zoom-in {
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        &-titleDesc {
            position: absolute;
            left: 69px;
            top: -40px;
            color: #999999;
            font-size: 14px;
        }
        &-uploadImg:hover .container-form-uploadImg-create{
            display: flex;
        }
        &-card {
            width:160px;
            height:136px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px solid rgba(238,238,238,1);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 14px;
            &-border {
                width: 136px;
                height: 84px;
            }
            &-img {
                width: 120px;
                height: 68px;
                position: absolute;
                left: 20px;
                top: 22px;
            }
            &-price {
                width: 120px;
                height: 68px;
                position: absolute;
                left: 20px;
                top: 22px;
                z-index: 8;
            }
            &-change {
                width: 160px;
                height: 136px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                opacity: 0;
            }
            &-create {
                width: 160px;
                height: 136px;
                position: absolute;
                // left: 20px;
                // top: 22px;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.5);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 12;
                cursor: pointer;
                .el-icon-delete {
                    font-size: 16px;
                    color: #ffffff;
                    margin-right: 18px;
                }
                .el-icon-zoom-in {
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        &-content {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            &-input{
                width: calc((100% - 64px)/3);
                margin-right: 32px;
                margin-top: -10px;
                position: relative;
            }
            &-input:nth-child(3n) {
                // margin-right: 0;
            }
            &-input:nth-child(5){
                width: auto;
            }
            .container-form-tip {
                position: absolute;
                top: -40px;
                left: 77px;
                z-index: 99;
            }
            .length {
                width: auto;
            }
        }
        &-upload:hover .container-form-upload-create{
            display: flex;
        }
        &-card:hover .container-form-card-create{
            display: flex;
        }
    }
    .container-phone {
        width: calc(100% - 64px);
        margin: 0px auto;
        background:rgba(251,251,251,1);
        border:1px solid rgba(238,238,238,1);
        box-sizing: border-box;
        padding: 24px 32px;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 36px;
        &-title {
           color: #333333;
           font-size: 14px;
           position: relative;
           margin-left: 4px;
           &::before {
               content: '*';
               position: absolute;
               left: -8px;
               top: 1px;
               font-size: 14px;
               color: #FF3030;
           }
        }
        &-wrap {
            margin-top: 12px;
            height: 36px;
            display: flex;
            align-items: center;
            &-input {
                width: 281px;
                height: 36px;
            }
            &-button {
                width: 120px;
                height: 36px;
                border-radius:0px 4px 4px 0px;
                position: relative;
                left: -5px;
                color: #ffffff;
                font-size: 14px;
                line-height: 11px;
            }
        }
        &-desc {
            color: #666666;
            font-size: 12px;
            margin-top: 14px;
            margin-bottom: 36px;
        }
    }
    .container-button {
        height: 36px;
        display: flex;
        padding-left: 32px;
    }
    .container-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
        .container-success {
            width: calc(100% - 64px);
            margin: 0 auto;
            margin-top: 47px;
            background:rgba(251,251,251,1);
            border:1px solid rgba(238,238,238,1);
            padding: 117px 0 103px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            &-logo {
                width: 72px;
                height: 72px;
            }
            &-title {
                color: #000000;
                font-size: 20px;
                font-weight: 500;
                margin: 24px 0;
            }
            &-desc {
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                white-space: nowrap;
                margin-bottom: 14px;
            }
            &-remark {
                color: rgba(47, 189, 179, 1);
                font-size: 16px;
                white-space: nowrap;
                margin-top: 18px;
            }
        }
        .container-success-button {
            width: 120px;
            height: 36px;
            margin: 0 auto;
            margin-top: 52px;
            margin-bottom: 85px;
            color: #606972;
        }
    }
    .container-cation {
        width: calc(100% - 64px);
        margin: 0 auto;
        margin-top: 47px;
        background:rgba(251,251,251,1);
        border:1px solid rgba(238,238,238,1);
        padding: 32px;
        display: flex;
        flex-direction: column;
        &-title {
            color: #3F454B;
            font-size: 18px;
        }
        &-desc {
            color: #999999;
            font-size: 14px;
            padding: 16px 0;
            line-height: 22px;
            border-bottom: 1px #EBEEF5 solid;
        }
        &-wrap {
            width: 100%;
            background:rgba(255,255,255,1);
            border:1px solid rgba(238,238,238,1);
            box-sizing: border-box;
            padding: 16px 32px 36px 32px;
            display: flex;
            margin-top: 32px;
            flex-direction: column;
            align-items: center;
            .container-left, .container-right {
                width: 50%;
                display: flex;
                flex-direction: column;
                &-head {
                    color: #333333;
                    font-size: 16px;
                    font-weight: 500;
                    padding: 16px 0;
                    border-bottom: 1px #EBEEF5 solid;
                    margin-bottom: 20px;
                   &-desc {
                       color: #999999;
                       font-size: 14px;
                       margin-left: 12px;
                   }
                }
                &-info {
                    display: flex;
                    height: 14px;
                    margin-bottom: 18px;
                    &-title {
                        min-width: 100px;
                        color: #333333;
                        font-size: 14px;
                        line-height: 22px;
                        text-align: right;
                        margin-right: 16px;
                    }
                    &-titlert {
                        color: #333333;
                        font-size: 14px;
                        line-height: 22px;
                        min-width: 108px;
                        text-align: right;
                        margin-right: 16px;
                    }
                    &-content {
                        color: #3F454B;
                        font-size: 14px;
                        width: 100%;
                        line-height: 22px;
                        cursor: pointer;
                    }
                }
            }
            .container-cation-wrap-deadline {
                color: #EE4E59;
                font-size: 20px;
                font-weight: 500;
                margin: 0 auto;
                margin-top: 46px;
                margin-bottom: 14px;
            }
            .container-cation-wrap-foot {
                color: #333333;
                font-size: 14px;
                margin: 0 auto;
            }
        }
        &-code {
            width: 294px;
            height: 294px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 32px;
            background-color: #ffffff;
            &-img {
                width: 262px;
                height: 262px;
            }
        }
        .container-cation-code-desc {
            color: #666666;
            font-size: 14px;
            margin-top: 20px;
        }
    }
    .container-cation-foot {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 36px;
        margin-top: 32px;
    }
}

// provide样式
.container-form-provide {
    padding: 11px 18px;
    color: #666666;
    font-size: 12px;
    line-height: 20px;
    span {
        color: #333333;
        font-weight: 500;
    }
}

</style>

<style lang="less">
.account-form {
    .el-step .iconfont {
        font-size: 10px;
    }
    .el-form--label-top .el-form-item__label {
        color: #333333;
        padding: 5px 0 0px;
    }
    .el-input__inner {
        height: 36px;
        line-height: 36px;
        border: 1px solid rgba(238,238,238,1);
        background: #FBFBFB;
    }
    .el-upload--picture-card {
        width: 100px;
        height: 100px;
    }
    .container-form-card .el-upload--picture-card {
        width: 160px;
        height: 136px;
    }
    .el-form-item {
        margin-bottom: 24px;
    }
    .el-radio {
        width: 332px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        padding-left: 20px;
    }
    .el-cascader {
        width: 332px;
    }
    .el-textarea__inner {
        background-color: #FBFBFB;
    }
}
</style>